第二十三天：Nuxt 應用部署方式

Node.js 伺服器

使用 Nitro 中的 Node.js 伺服器預設配置部署到任何 Node.js 主機。

• 默認的輸出格式，如果未指定或未自動檢測
• 只加載為了最佳的冷啟動時間而渲染請求所需的块
  這對於將 Nuxt 應用部署到任何 Node.js 主機都很有用。

入口點
使用 Node 伺服器預設配置運行 nuxt build 時，結果將是一個啟動就緒的 Node 伺服器入口點。

node .output/server/index.mjs

範例

$ node .output/server/index.mjs
Listening on http://localhost:3000

在運行時配置默認值
此預設配置將尊重以下運行時環境變數：

• NITRO_PORT 或 PORT（默認為 3000）
• NITRO_HOST 或 HOST（默認為 '0.0.0.0'）
• 如果 NITRO_SSL_CERT 和 NITRO_SSL_KEY 都存在，則以 HTTPS 模式啟動服務器。在大多數情況下，除了用於測試之外，不應該使用這個選項，Nitro 服務器應該在像 nginx 或 Cloudflare 這樣的反向代理後運行，用於終止 SSL。
  使用 PM2
  要使用 pm2，可以使用 ecosystem.config.js 文件：

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

使用集群模式
您可以使用 NITRO_PRESET=node_cluster 以使用 Node.js 集群模組實現多進程性能。

默認情況下，工作負載使用循環輪詢策略分發給工作程序。
靜態托管
有兩種方式可以將 Nuxt 應用部署到任何靜態托管服務：

• 使用 SSR（靜態站點生成）並在構建時預渲染應用程序的路由。這是在執行 nuxi generate 時的默認行為。它還會生成 /200.html 和 /404.html 單頁應用程序後備頁面，可以在客戶端渲染動態路由或 404 錯誤（儘管您可能需要在靜態主機上進行配置）。
• 或者，您可以使用 ssr: false 預渲染您的站點（靜態單頁應用）。
  基於爬取的預渲染
  使用 nuxi generate 命令使用 Nitro 爬取程序構建並預渲染應用程序。此命令類似於設置 nitro.static 選項為 true 的 nuxt build，或運行 nuxt build --prerender。

npx nuxi generate

部署 .output/public 目錄到任何靜態托管服務或使用 npx serve .output/public 在本地預覽。

Nitro 爬取程序的工作方式：

• 載入您的應用程序根路由（/）的 HTML、您的 ~/pages 目錄中的任何非動態頁面，以及 nitro.prerender.routes 數組中的任何其他路由。
• 將 HTML 和 payload.json 保存到 ~/.output/public/ 目錄以供靜態提供。
• 在 HTML 中查找所有錨點標籤**a href="..."**以導航到其他路由。
• 重復步驟 1-3，直到找不到更多的錨點標籤。

這是重要的，因為不能自動預渲染未連接到可發現頁面的頁面。

選擇性預渲染

您可以在 nuxt.config 文件中手動指定 Nitro 將在構建時提取和預渲染的路由，或者忽略不想預渲染的路由，如 /dynamic：

defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/user/1', '/user/2']
      ignore: ['/dynamic']
    }
  }
})

您可以將此選項與 crawlLinks 選項結合使用，以預渲染爬取器無法發現的一組路由，例如您的 /sitemap.xml 或 /robots.txt：

defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml', '/robots.txt']
    }
  }
})

將 nitro.prerender 設置為 true 類似於將 nitro.prerender.crawlLinks 設置為 true。

僅客戶端渲染

如果您不想預渲染路由，使用靜態托管的另一種方式是在 nuxt.config 文件中將 ssr 屬性設置為 false。然後，nuxi generate 命令將生成一個 .output/public/index.html 入口點和 JavaScript 包，就像經典的客戶端 Vue.js 應用程序一樣。

defineNuxtConfig({
  ssr: false
})

預設配置

除了 Node.js 伺服器和靜態托管服務之外，Nuxt 3 項目還可以使用幾個經過充分測試的預設配置並進行最小的配置。

您可以在 nuxt.config 文件中明確設置所需的預設配置：

export default {
  nitro: {
    preset: 'node-server'
  }
}

或者在運行 nuxt build 時使用 NITRO_PRESET 環境變數：

NITRO_PRESET=node-server nuxt build

支援的主機提供商

Nuxt 3 可以部署到多個雲提供商，只需最少的配置：

• AWS
• Azure
• Cleavr
• Cloudflare
• DigitalOcean
• Edgio
• Firebase
• Heroku
• Lagon
• Netlify
• Render
• Stormkit
• Vercel

CDN 代理

在大多數情況下，Nuxt 可以處理不是由 Nuxt 自身生成或創建的第三方內容。但是有時這樣的內容可能會引發問題，特別是 Cloudflare 的「縮小和安全選項」。

因此，您應該確保在 Cloudflare 中取消選中/禁用以下選項。否則，不必要的重新渲染或水合錯誤可能會影響您的生產應用程序。

• Speed > Optimization > Auto Minify: 取消選中 JavaScript、CSS 和 HTML
• Speed > Optimization > 停用 "Rocket Loader™"
• Speed > Optimization > 停用 "Mirage"
• Scrape Shield > 停用 "Email Address Obfuscation"
• Scrape Shield > 停用 "Server-side Excludes"

有了這些設置，您可以確保 Cloudflare 不會將可能導致不需要的副作用的腳本注入到您的 Nuxt 應用程序中。

這就是今天的內容，希望它有助於您了解如何在不同環境中部署 Nuxt 應用程序。